<div id="imagelayout">
	<div class="image-top-message" v-show="DocumentTemplate==2 && ImageDataIsExpanded">
		<!-- <div class="left" v-cloak>找到文件&nbsp;{{ImageParams.counttotal}}&nbsp;个</div> -->
		<div class="right">
			<el-checkbox v-model="ImageParams.expanded" :true-label="1" :false-label="0" @change="ImageExpandedChange">显示子分类内容</el-checkbox>
		</div>
	</div>
	<div class="image-container" :style="{'padding':ImageType=='table'?'0 12px':''}">
		<div class="image-wrapper">
			<template v-if="ImageType == 'table'">
				<!--{template pc/components/image/template_table}-->
			</template>
			<template v-else>
				<!--{template pc/components/image/template_other}-->
			</template>
		</div>
	</div>
	
	<div style="position: relative;height: 40px;" v-if="ImageParams.ValLoading" v-cloak>
		<div class="img-loading">
			<span class="el-icon-loading"></span>加载中...
		</div>
	</div>
	<div style="position: relative;height: 40px;" v-if="ImageDataList.length&&ImageParams.page>=ImageParams.totalpage&&!ImageParams.loading&&!ImageParams.ValLoading" v-cloak>
		<div class="img-loading">已经到底了</div>
	</div>
	
</div>
<div class="container-not" style="display: none;" v-cloak>
	<div class="el-empty">
		<div class="el-empty__image">
			<img src="{MOD_PATH}/image/nodata.svg" />
		</div>
		<div class="el-empty__description">
			<p>暂无数据</p>
		</div>
	</div>
</div>
<!--{template pc/components/image/ImageWaterfall}-->
<!--{template pc/components/image/ImageRowGrid}-->
<!--{template pc/components/image/ImageList}-->
<!--{template pc/components/image/ImageTable}-->
<!--{template pc/components/image/ImageAudioPlay}-->
<script type="text/javascript">
	var JsImageWatch = {
		ImageType:{
			handler(){
				var self = this;
				if(this.ImageParams.loading && this.ImageParams.ValLoading){
					return false;
				}
				self.$nextTick(function(){
					self.LayoutStructure();
					self.ImageParams.scroll = false;
					self.ImageInit();
				});
				
			},
			deep:true
		},
		ImageDataList:{
			handler(val){
				var self = this;
				var h = $(document).height()-$('.el-header').height();
				this.ImageParams.Height = h;
				self.$nextTick(function(){
					self.ImageInit();
					if(val.length){
						$('#container_scroll .container-not').hide();
					}else{
						$('#container_scroll .container-not').show();
					}
				});
			},
			deep:true
		}
	};
	var JsImageData = $.extend({},JsImageWaterfallData,JsImageRowGridData,JsImageListData,ImageAudioPlayData,JsImageTableData,{
		ImageDocumentAdminId:'$_G[adminid]',
		ImageDocumentCtrl:false,
		ImageDataIsExpanded:false,
		ImageDataList:[],
		ImageDataListShow:[],
		ImageType:'waterFall',//rowGrid,imageList
		ImageParams:{
			counttotal:0,
			expanded:false,
			page: 1,
			perpage: 50,
			total: 0,
			totalpage:0,
			scroll:false,
			loading:true,
			ValLoading:false,
			Height:0,
			Videovoice:true,
			Musicovoice:false
		},
	});
	var JsImageMethods = $.extend({},JsImageWaterfallMethods,JsImageRowGridMethods,JsImageListMethods,ImageAudioPlayMethods,JsImageTableMethods,{
		
		ImageCreate(){
			var pagesetting = $pagesetting;
			var layout = 'waterFall';
			var imageexpanded = false;
			<!--{if $_G[uid]}-->
			if(pagesetting && pagesetting.layout){
				layout = pagesetting.layout;
			}
			var fimageexpanded = '$ImageExpanded';
			if(fimageexpanded && parseInt(fimageexpanded)>0){
				imageexpanded = true;
			}
			<!--{else}-->
			var flayout = sessionStorage.getItem('Layout');
			if(flayout){
				layout = flayout;
			}else{
				if(pagesetting && pagesetting.layout){
					layout = pagesetting.layout;
				}
			}
			
			var fimageexpanded = sessionStorage.getItem('imageexpanded');
			if(fimageexpanded == null){
				imageexpanded = true;
			}else{
				if(parseInt(fimageexpanded)){
					imageexpanded = true;
				}
			}
			
			<!--{/if}-->
			this.ImageParams.expanded = imageexpanded?1:0;
			this.ImageType = layout;
		},
		

		ImageInit(){
			var self = this;
			var IsRefresh = true;
			if(this.ImageParams.scroll){
				IsRefresh = false;
			}
			if(this.ImageType == 'imageList'){
				this.ImagesListInit(IsRefresh);
				var StoreImgdatas = self.ImageList.StoreImgdatas;
			}else if(this.ImageType == 'rowGrid'){
				this.ImagesRowGridInit(IsRefresh);
				var StoreImgdatas = self.ImageRowGrid.StoreImgdatas;
			}else if(this.ImageType == 'table'){
				this.ImagesTableInit(IsRefresh);
				var StoreImgdatas = self.ImageTable.StoreImgdatas;
			}else{
				this.ImagesWaterfallInit(IsRefresh);
				var StoreImgdatas = self.ImageWaterfall.StoreImgdatas;
			}
			if(this.DetailsIframe){
				self.$refs.iframesrc.contentWindow.postMessage({
					data:StoreImgdatas
				})
			}
			this.ImageParams.loading = false;
			this.ImageParams.ValLoading = false;
		},
		ImageDetails(rid){
			
			if(this.OpenDetailType == 'new'){
				var arr = [];
				for(var i in this.ImageDataList){
					arr.push(this.ImageDataList[i].rid)
				}
				sessionStorage.setItem('imgs',arr.join(','));
				var params = this.CommonSetParam();
				params['ispage'] = this.ImageParams.page>=this.ImageParams.totalpage?false:true;
				sessionStorage.setItem('imgparam',JSON.stringify(params));
				window.open(SITEURL+MOD_URL+'&op=details#rid='+rid);
			}else{
				this.DetailsIframe = SITEURL+MOD_URL+'&op=details&opentype=current#rid='+rid;
			}
		},
		ImageLink(url){
			if(url.substring(0,8)=='https://' || url.substring(0,7)=='http://'){
				window.open(url);
			}else{
				window.open('https://'+url);
			}
			return false;
		},
		ImageMouseenter(e){
			this.ImageAudioPlayMouseenter($(e.target));
		},
		ImageMouseleave(e){
			this.ImageAudioPlayMouseleave($(e.target));
		},
		ImageLayoutScrollShow(){
			var self = this;
			var H = $('#container_scroll .el-scrollbar__wrap')[0].clientHeight;//获取可视区域高度
			var S = $('#container_scroll .el-scrollbar__wrap')[0].scrollTop;
			var arr = [];
			var Hscreen = 0;
			if(this.DocumentTemplate==3 && this.Screenshow && $('.screen-box3').length){
				Hscreen = $('.screen-box3').outerHeight()+35;
			}
			S = S-Hscreen;
			if(self.ImageType == 'imageList'){
				var StoreImgdatas = JSON.parse(JSON.stringify(self.ImageList.StoreImgdatas));
			}else if(self.ImageType == 'rowGrid'){
				var StoreImgdatas = JSON.parse(JSON.stringify(self.ImageRowGrid.StoreImgdatas));
			}else if(self.ImageType == 'table'){
				var StoreImgdatas = JSON.parse(JSON.stringify(self.ImageTable.StoreImgdatas));
			}else{
				var StoreImgdatas = JSON.parse(JSON.stringify(self.ImageWaterfall.StoreImgdatas));
			}
			self.ImageDataListShow = [];
			for(var o in StoreImgdatas){
				var item = JSON.parse(JSON.stringify(StoreImgdatas[o]));
				
				if ((H+S) >= item.ptop && S<item.pbottom) {
					item['index'] = parseInt(o);
					self.ImageDataListShow.push(item);
				}
			}
			
		},
		Imageload(rid){
			var self = this;
			var item = $(self.$refs['img_'+rid]);
			item.closest('.image-single').css('background','').removeClass('radius');
			item.removeClass('opacity').siblings('.img').remove();
			
		},
		ImageOperationVal(type,val){
			return {
				type:type,
				val:val
			};
		},
		ImageOperation(command){
			var type = command.type;
			var val = command.val;
			if(type == 'share'){
				var self = this;
				$.post('{MOD_URL}&op=ajax&operation=createshare',{
					rid:val
				},function(data){
					if(data.success){
						self.$notify({
						  title: '分享成功',
						  duration:6000,
						  dangerouslyUseHTMLString: true,
						  message: '<p class="address">'+data.success+'</p><div style="text-align: right;margin-top: 6px;"><button type="button" class="el-button el-button--primary el-button--mini copy-share-btn"><span>复制地址</span></button></div>',
						  position: 'bottom-right'
						});
					}else{
						self.$message({
						  message: '分享失败',
						  type: 'error'
						});
					}
				},'json')
			}else if(type == 'down'){
				window.open(SITEURL+MOD_URL+'&op=download&dpath='+val);
			}else if(type == 'star'){
				// this.dialogVisible = true;
			}else if(type == 'address'){
				var self = this;
				$.post('{MOD_URL}&op=ajax&operation=realfianllypath',{
					rid:val
				},function(data){
					if(data.realfianllypath){
						self.$notify({
						  title: '固定地址',
						  duration:6000,
						  dangerouslyUseHTMLString: true,
						  message: '<p class="address">'+data.realfianllypath+'</p><div style="text-align: right;margin-top: 6px;"><button type="button" class="el-button el-button--primary el-button--mini copy-share-btn"><span>复制地址</span></button></div>',
						  position: 'bottom-right'
						});
					}else{
						self.$message({
						  message: '获取固定地址失败',
						  type: 'error'
						});
					}
				},'json')
			}
		},
		ImageExpandedChange(status){
			<!--{if $_G[uid]}-->
			$.post('{MOD_URL}&op=ajax&operation=expandedsetting',{
				settingsubmit:true,
				formhash:'{FORMHASH}',
				pichomeimageexpanded:status?1:0
			},function(data){
				if(data.success){
				}else{
					self.$message({
					  message: '设置失败',
					  type: 'error'
					});
				}
			},'json');
			<!--{else}-->
			sessionStorage.setItem('imageexpanded',status?1:0);
			<!--{/if}-->
			this.CommonGetImageData();
		},
		ImageMounted(){
			var self = this;
		}
	});
</script>